<template>
	<div class="shop_view">
		<div class="shop_hd clearfix">
			<span class="left">我的道具</span>
			<div class="right" @click="jumpShop">
				<span class="left">道具商城</span>
				<i class="iconfont icon-right left"></i>
			</div>
		</div>
		<div class="shop_prop"
				v-infinite-scroll="moreList"
                infinite-scroll-disabled="loading"
                infinite-scroll-immediate-check = "true"
                infinite-scroll-distance="100">
			<ul>
				<li v-for="item in shopList">
					<img class="left" src="../../../../images/shovel.png">
					<div class="prop_info">
						<span>{{item.propName}}</span>
						<p>{{item.propDsc}}</p>
					</div>
					<div class="right">
						<p class="prop_num">x{{item.propNum}}</p>
					</div>
				</li>
			</ul>
			<no-data v-if="noInfo" color="white"></no-data>
			<!-- <div class="loading-box">
	            <list-loading v-on:clickEvent="clickMoreList" :noMoreCoupon="noMoreFind"></list-loading>
	        </div> -->
		</div>
	</div>
</template>
<script>
	import getData2 from 'src/service/getData2.js'
	import * as types from 'src/vuex/types.js'
    import * as types1 from 'src/vuex/appendType.js'
	import { mapState } from 'vuex'
	export default {
		components:{},
        data(){
            return{
                loading:true,
                noMoreFind:true,
                noInfo:false,
            }
        },
		created:function(){
			this.$emit('header-info', {
	      hide: true
	    })
			this.$store.commit(types1.shop_list);
            this.$store.commit(types1.shop_page,1);
            this.$store.commit(types.GET_SCORLL_STATUS,true);
			this.clickMoreList();
		},
		computed:{
            ...mapState({
                userInfo:state => state.user.userInfo,
                shopList:state => {
                	if(state.shop.shopList.length==0){
                		this.noInfo =true;
                	}
                	console.log(state.shop.shopList)
                	return state.shop.shopList},
                shopPageLimit:state => state.shop.shopPageLimit,

            })
        },
		methods:{
			jumpShop(){
				this.$router.push({'path':'/shopIndex'});
			},
			clickMoreList:function(){

                let me = this;
                // this.noMoreFind = false;
                this.$store.dispatch('myProp',{method:'post'}).then(function(rep){
                    if(rep.content.result.length>0){
                        if(rep.content.result.length < me.shopPageLimit){
                            // setTimeout(function(){me.noMoreFind = true;},300);
                        };
                        if(rep.content.result.length == me.shopPageLimit){

                            me.loading = false;
                            // me.noMoreFind = true;
                        }
                    }else{
                        // setTimeout(function(){me.noMoreFind = true;},300);
                    }
                });
            },
            moreList:function(){
                this.loading = true;
                // this.noMoreFind = true;
                this.clickMoreList();

            },
		},
		beforeRouteLeave(to, from, next){
	    next();
	  }
	}
</script>
<style scoped>
	.shop_view{
		height: 100%;
		overflow-y: auto;
		background-color: #3a393e;
	}
	.shop_hd{
		padding: 0 0.667rem;
		line-height: 3.2rem;
		overflow: hidden;
	}
	.shop_hd span{
		font-size: 1rem;
		color:#999;
		padding-left: 0.75rem;
	}
	.shop_hd i{font-size: 1rem;line-height: 3rem;}
	.shop_hd i:before{
		float: left;
	}
	.shop_hd .right,.shop_hd .right .left{color:#ec4e8a;}
	/*.shop_prop{height: calc(100% - 6.63rem);}*/
	.shop_prop ul{padding:0 0.667rem;}
	.shop_prop li{
		height: 5.0625rem;
		background-color: #48474c;
		color:#999;
		margin-bottom: 0.75rem;
		border-radius: 3px;
		padding:0 1rem 0;
		overflow: hidden;
		/*display: -webkit-flex;*/
		/*display: flex;*/
		/*align-items: center;*/
	}
	.shop_prop li img{
		width: 3rem;
		height: 3rem;
		margin-right:1rem;
		margin-top:1.03rem;
	}
	.shop_prop .prop_info{
		width: calc(100% - 12rem);
		height: 3.065rem;
		margin-top:1rem;
		float: left;
	}
	.shop_prop .prop_info span{
		font-size: 1rem;
		color:#e5e5e5;
		display: block;
		margin:0.2rem 0;
	}
	.shop_prop .prop_info p{
		font-size: 0.8rem;
	}
	.shop_prop div.right{
		min-width: 2rem;
		float: right;
		height: 3rem;
		margin-top:1.907rem;
	}
	.shop_prop div.right span{
		display: block;
		text-align: center;
		font-size: 1.5rem;
		color:#ec4e8a;
		line-height: 1.15;
	}
	.prop_num{
		font-size: 1.15rem;
		color:#e5e5e5;
	}
</style>
